<template>
  <div class="box">
   
    <van-notice-bar
  left-icon="volume-o"
  text="我是练习时长两年半的
个人练习生蔡徐坤,
喜欢唱、跳、rap、篮球
music"
/>
  
    
    <!-- 头部名片 -->
     <div class="card">
      <p class="header1">
        <img :src="list.avatar" alt="">
        <!-- {{portrait.avatar}} -->
      </p>
      <p class="header2">{{list.nickname}}</p>
      <p class="header3"><router-link to="/User">编辑资料</router-link> </p>
     </div>
     <!-- 中间头条 -->
     <div class="headline">
            <span class="tops">
              <p class="a">{{ster.publish_num}}</p>
              <p class="b">{{ster.liked_num}}</p>
            </span>
            <span class="unders">
              <p class="c">头条</p>
              <p class="d">获赞</p>
            </span>
     </div>
     <!-- 底部收藏 -->
     <div class="collect">
        <span class="inco1">
          <p class="p1"><span class="iconfont icon-collection"></span></p>
          <p class="p2"><span class="iconfont icon-history"></span></p>
        </span>
        <span class="inco2">
          <p class="p3">收藏</p>
          <p class="p4" @click="record">历史</p>
        </span>
     </div>
     <!-- 修改密码，关于我们，联系我们 -->
    <div class="tab"> 
      <span class="sp1" @click="password">
        <p class="lefts">修改密码</p>
        <p class="rights">></p>
      </span>
      <span class="sp1">
        <p class="lefts">联系我们</p>
        <p class="rights">></p>
      </span>
      <span class="sp1">
        <p class="lefts">关于我们</p>
        <p class="rights">></p>
      </span>
    </div>
    
     <p class="quit"><router-link to="/Login">退出登录</router-link></p>
  </div>
</template>
 
<script>

export default {
        data(){
          return{
            //  top:{},
              oldPassword:'',
              newPassword:'',
              uid:'',
              list:[],
              ster:[],
          }
        },
    methods:{
       bun(){
             this.$store.commit('buns','你好')
          },
       password(){   
             this.$router.push('/Loginsposs')
         },
         record(){
          this.$router.push('/Record')
         }
   },
    created(){
      this.list = JSON.parse(localStorage.getItem('Token'))
      console.log(this.list)
      this.ster = JSON.parse(localStorage.getItem('user'))
      console.log(this.ster)
    }
 }

  
</script>
<style lang="less" scoped>

 .box{
  background-image: url('../assets/3.webp') ;
  background-repeat: no-repeat;
  // background-size: 480px 230px;
  background-size:cover ;
 }
  .card{

    display: flex;
    height: 130px;
   
   
  }
  .header1{  
    margin-top:40px ; 
    margin-left:20px ;
   
    width: 80px;
    height: 80px;
    border-radius:40px
  }
  .header1 img{
     width: 80px;
    height: 80px;
    height: 100%;
    width: 100%;
     border-radius:40px
  }
  .header2{
    margin-top:70px ; 
    margin-left:10px ;
  }
  .header3{
     margin-left:120px ;
     margin-top:70px ;  
     background-color: #fff;
     height: 23px;
     width: 89px;
     border-radius: 15px;
  }
 .headline{
  margin:0px ,0px;
  
  height: 80px;
  
 }
 .tops , .unders, .inco1, .inco2{
 display: flex; 
 
 }
 .a,  .b {
    margin:0px 90px;
 }
 .c,.d{
  margin-top:0px ;
 }
 .c{
  
  margin-left:80px;
 }
 .d{
  margin-left:155px ;
 }
 .iconfont{
  font-size: 34px;
 }
 .p1, .p2{
   margin:0px 77px;
 }
 .p3, .p4{
margin:0px 78px;
 white-space: nowrap;
 }
 .sp1{
  display: flex;
 }
.lefts{
  margin-left:10px ;
}
.rights{
   margin-left:280px ;
   height: 20px;
   line-height: 20px;
}
.quit{
  color: pink;
}
</style>